<template>
  <div>
    <!-- 商品的三级分类 -->
    <div class="content">
      <div class="life">
        <!-- logo和搜索 -->
        <LogoSearch/>

        <!-- 三级菜单 -->
        <TypeNav/>
      </div>
      <!-- 频道  地点列表 -->
      <div class="contentA">
        <div class="contentB">
          <div class="contentC">
            <span>频道:</span>
            <a href="##" class="baby">不限</a>
            <div class="items">
              <a href="##"><span>美食</span></a>
              <a href="##"><span>电影演出赛事</span></a>
              <a href="##"><span>休闲娱乐</span></a>
              <a href="##"><span>酒店</span></a>
              <a href="##"><span>丽人</span></a>
              <a href="##"><span>K歌</span></a>
              <a href="##"><span>运动健身</span></a>
              <a href="##"><span>景点/周边游</span></a>
              <a href="##"><span>亲子</span></a>
              <a href="##"><span>结婚</span></a>
              <a href="##"><span>购物</span></a>
              <a href="##"><span>宠物</span></a>
              <a href="##"><span>生活服务</span></a>
              <a href="##"><span>学习培训</span></a>
              <a href="##"><span>养车/用车</span></a>
              <a href="##"><span>医疗健康</span></a>
              <a href="##"><span>家居</span></a>
              <a href="##"><span>民宿公寓</span></a>
              <a href="##"><span>交通设施</span></a>
            </div>
          </div>
        </div>
        <div class="contentD">
          <span class="contentF">地点:</span>
          <a href="##" class="contentE">不限</a>
          <div class="list">
            <a href="##" class="listcontent">热门商区</a>
            <a href="##" class="nav-list">行政区</a>
            <a href="##">地铁线</a>
            <div class="listItem">
              <ul>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
                <li>三里屯/工体</li>
                <li>南锣鼓巷</li>
                <li>王府井/东单</li>
                <li>国贸/建外</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!--详情列表 -->
      <div class="navBottom clearFix">
        <div class="navBottom-smell">
          <div class="navtype">
            <a href="##">
              <input type="checkbox" />
              有团购
            </a>
            <a href="##">
              <input type="checkbox" />
              可订座
            </a>
            <div class="right">
              <a href="javascript:;">智能</a>
              <a href="javascript:;">好评</a>
              <a href="javascript:;">人气</a>
              <a href="javascript:;">好评最多</a>
              <a href="javascript:;">人均</a>
            </div>
          </div>
          <div class="contentbottom" v-for="(item,index) in searchFive" :key="index" @click="toDetail">
            <img :src="item.picUrl" />
            <div class="text">
              <div class="tubiao">
                <a href="##">{{item.poiName}}</a>
                <span class="iconfont icon-tuangou"></span>
              </div>
              <div id="iconfont">
                <i class="iconfont icon-wujiaoxing"></i>
                <i class="iconfont icon-wujiaoxing"></i>
                <i class="iconfont icon-wujiaoxing"></i>
                <i class="iconfont icon-wujiaoxing"></i>
                <i class="iconfont icon-wujiaoxing"></i>
                <b>{{item.tip}}人评价|人均¥{{item.price}}</b>
              </div>
              <span>自助餐</span>
              <div class="contentItem">
                <i>团购:</i>
                <a>仅售9.9元,法拉利带回家</a>
              </div>
              <div class="iconfontSmall">
                <span class="iconfont icon-xiala"></span>
                <a href="">更多8单团购</a>
              </div>
            </div>
          </div>
        </div>
        <div class="navList clearFix">
          <div class="navRigeht clearFix">
            <img src="./images/3.jpg" />
          </div>
        </div>
      </div>
      <div class="contentfooter">
        <div>
          <p>商户没有被收录?</p>
          <div class="footerlist">
            <a href="">添加商户</a>
          </div>
        </div>
        <div class="rightlist">
          <p>您对搜索的结果:</p>
        </div>
        <div class="satisfied">
          <a class="iconfont icon-manyi">满意</a>
        </div>
        <div class="dissatisfied">
          <a class="iconfont icon-bumanyi">不满</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  name: "Search",
  data() {
    return {
      preKeyword:'',
    };
  },
  beforeMount(){
    this.preKeyword = this.$route.query.keyword
  },
  mounted() {
    const{preKeyword} = this;
    this.$store.dispatch('getSearchRes',preKeyword);
  },
  computed:{
    // ...mapState({
    //   searchRes:state=>state.search.searchList[0].showList.slice(0,5)
    // }),
   ...mapGetters(['searchObj']),
   searchFive(){return this.searchObj.slice(0,5)}
  },
  methods:{
    toDetail(){
      this.$router.push('/detail')
    }
  }
};
</script>

<style lang="css" scoped>
.content {
  background: #f6f6f6;
  width: 100%;
}
/* 北京生活指南样式 */
.content .life {
  background: #fff;
  margin: 10px auto 0;
  padding-left: 15px;
}
.content .contentA {
  width: 1200px;
  height: 213px;
  margin: 0 auto;
  background-color: #fff;
}
.content .contentB {
  margin-top: 10px;
}
.content .contentC {
  padding-left: 15px;
  background: #fff;
  box-sizing: border-box;
  padding-top: 15px;
}
.content .contentC .baby {
  position: absolute;
  margin-left: 60px;
}
.content .contentC .items {
  margin-left: 145px;
  margin-top: -15px;
  height: 100px;
}
.content .contentC .items a {
  float: left;
  display: block;
  width: 99.96px;
  height: 19.81px;
}
.content .contentD {
  background-color: #fff;
  margin-top: -30px;
  margin-left: 15px;
}
.content .contentD .contentE {
  margin-left: 60px;
}
.content .contentD .list {
  margin-top: -15px;
  position: relative;

  left: 135px;
}

.content .contentD .list .listcontent {
  padding: 5px 10px;
  width: 100%;
  float: none;
  background: #f6f6f6;
  margin-right: 40px;
}
.content .contentD .list .nav-list {
  margin-right: 60px;
}

.content .contentD .listItem {
  width: 1015px;
  height: 100px;
  background: #f6f6f6;
  position: absolute;
  top: 20px;
}
.content .contentD .listItem ul {
  position: absolute;
  margin-left: 10px;
  margin-top: 15px;
}
.content .contentD .listItem ul li {
  float: left;
  width: 99.96px;
  margin-bottom: 10px;
}
.content .navBottom {
  background: #fff;
  width: 1200px;
  
  margin-top: 10px;
  margin: 10px auto;
}
.content .navBottom .navBottom-smell {
  height: 35px;
  border-bottom: 2px solid #f6f6f6;
}
.navBottom .navBottom-smell .navtype {
  line-height: 40px;
  margin-left: 10px;
}
.navBottom .navBottom-smell .right {
  float: right;
  margin-right: 40px;
}
.navBottom .navBottom-smell .right a {
  padding: 0 10px;
}
.navBottom .navBottom-smell .right a + a {
  border-left: 1px solid #b3aeae;
}
.content .contentbottom {
  margin-top: 10px;
  width: 100%;
  height: 170px;
  border-bottom: 1px solid #f6f6f6;
  /* position: relative; */
}
.content .contentbottom img {
  width: 180px;
  height: 140px;
  display: inline-block;
  margin-left: 15px;
  margin-bottom: 10px;
}
.content .contentbottom .text {
  width: 723px;
  height: 70px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
  border-bottom: 1px dashed #666;
}
.content .contentbottom .text .tubiao span {
  margin-left: 10px;
  position: absolute;

  color: #df5000;
}
.content .contentbottom .text b {
  font-weight: normal;
  font-size: 2px;
  color: #999;
  margin-left: 10px;
}
.content .contentbottom .iconfont {
  float: left;
  color: red;
  font-size: 6px;
}
.content .contentbottom .iconfont a {
  float: left;
}
.content .contentbottom .text span {
  float: left;
  font-size: 10px;
  color: #999;
}
.content .contentbottom .contentItem {
  margin-right: 0px;
  margin-top: 50px;
}
.content .contentbottom .contentItem i {
  font-size: 6px;
  margin-right: 5px;
  color: #ff6b37;
}

.content .contentbottom .contentItem a {
  font-size: 6px;
  color: #999;
}

.content .contentbottom .iconfontSmall span {
  float: right;
  margin-left: 3px;
}
.content .contentbottom .iconfontSmall a {
  float: right;
  color: #999;
  font-size: 8px;
}
.content .navList .navRigeht img {
  width: 180px;
  position: absolute;
  margin-left: 1020px;
  margin-top: -37px;
}
.contentfooter {
  width: 1200px;
  background: #fff;
  margin: 50px auto;
}
.contentfooter p {
  margin-left: 20px;
  padding-top: 15px;
}

.contentfooter .footerlist {
  position: relative;
  display: block;
  background: #fffcf5;
  width: 90px;
  height: 30px;
  margin-top: 10px;
  margin-left: 20px;

  border: 1px solid #ff6b37;
}
.contentfooter .footerlist a {
  font-size: 12px;
  position: absolute;
  padding-top: 7px;
  padding-left: 20px;
}
.contentfooter .rightlist {
  float: right;
  margin-top: -36px;
  margin-right: 190px;
}
.contentfooter .satisfied {
  float: right;
  display: block;
  width: 90px;
  height: 30px;
  margin-top: -25px;
  margin-right: 95px;
}

.contentfooter .satisfied a {
  background: #fbfbfb;
  font-size: 20px;
  border: #f6f6f6 solid 1px;
}
.contentfooter .dissatisfied {
  float: right;
  display: block;
  width: 90px;
  height: 30px;
  margin-top: -25px;
  margin-right: -165px;
}
.contentfooter .dissatisfied a {
  background: #fbfbfb;
  font-size: 20px;
  border: #f6f6f6 solid 1px;
}
</style>